<!--
 * @Author: zhangxiangsheng 1026583651@qq.com
 * @Date: 2024-04-10 13:44:29
 * @LastEditors: zhangxiangsheng 1026583651@qq.com
 * @LastEditTime: 2024-04-10 14:12:25
 * @FilePath: \crm\pages\index\components\card4.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <view class="card">
    <view class="title u-flex u-flex-between">
      <view class="u-flex">
        <u--image
          :src="$z.imgsrc('ribao-icon.png')"
          width="36rpx"
          height="36rpx"
        ></u--image>
        <view class="text">日报</view>
      </view>

      <!-- <u-icon name="arrow-right" size="12" color="#999999"></u-icon> -->
    </view>
    <view class="list">
      <view class="item" v-for="(item, index) in list" :key="index">
        <view class="text1">{{ item.text1 }}</view>
        <view class="text2">{{ item.text2 }}</view>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        list: [
          {
            text1: "日报",
            text2: "23",
          },
          {
            text1: "周报",
            text2: "23",
          },
          {
            text1: "月报",
            text2: "23",
          },
        ],
      };
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {},
    },
  };
</script>
<style lang="scss" scoped>
  .card {
    margin: 14rpx 18rpx;
    background-color: #fff;
    border-radius: 8rpx;
    // padding: 0 24rpx;
    // padding-bottom: 16rpx;
    .title {
      font-size: 28rpx;
      font-weight: bold;
      height: 88rpx;
      padding: 0 24rpx;
      .text {
        padding-left: 12rpx;
        line-height: 1;
      }
    }
    .list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0 24rpx;
      .item {
        width: 210rpx;
        background-color: #f7f8f8;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        // align-items: center;
        margin-bottom: 18rpx;
        height: calc(68.5 * 2rpx);
        border-radius: 8rpx;
        padding: 24rpx 20rpx;

        .text1 {
          color: #838589;
          font-size: 28rpx;
          line-height: 1;
        }
        .text2 {
          color: #080d1f;
          font-size: 40rpx;
          line-height: 1;
        }
        .text {
          // color: #171a1d;
          // font-size: 24rpx;
          // padding: 8rpx 0;
          // margin-bottom: 24rpx;
        }
      }
    }
  }
</style>
